<template>
  <div class="mobile-anniversary-category common-mobile-view">
    <div class="category-list">
      <category-card
          v-for="(item, index) in anniversaryCategoryMap.keys()" :key="index"
          :category-item="anniversaryCategoryMap.get(item)" :count="getCategoryCount(item)"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import CategoryCard from '@/components/Anniversary/CategoryCard.vue'
import { onMounted } from 'vue'
import { useAnniversaryStore } from '@/store/anniversary.ts'
import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil.ts'

const anniversaryStore = useAnniversaryStore()

onMounted(async () => {
  await anniversaryStore.queryAnniversaryCategory()
})

const getCategoryCount = (name: string): number => {
  const categoryItem = anniversaryStore.categoryStats.find((item) => item.name === name)
  if (categoryItem) {
    return categoryItem.value
  } else {
    return 0
  }
}
</script>

<style lang="scss">
.mobile-anniversary-category {
  .category-list {
    padding: 0 5px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 15px;
  }
}
</style>
